<style>
.image_material,.text_material,.voice_material,.video_material {
	display: block;
    border: 1px dashed #ddd;
    width: 308px;
    height: auto;
    background: #eee;
    text-align: center;
    color: #333;
    display: block;
    float: left;
    position: relative;
}
.image_material .select_image,.voice_material .select_voice,.video_material .select_video,.text_material .select_text {
    line-height: 196px;
    display: block;
    height: 200px;
}
#voice_area,#video_area,#image_area{
	position: relative;
}
#image_area .delete,#voice_area .delete,#video_area .delete,.text_material .delete {
    position: absolute;
    top: 1px;
    white-space: nowrap;
    display: none;
}
.appmsg_item {
    padding: 15px;
    width: 278px;
}
.appmsg_item .main_img {
    height: auto;margin: 0;
}
#image_area .image_wrap{border: 1px dashed #ddd;width: 308px;display: none;}    
.video_wrap,.voice_wrap{background: #fff;}
.voice_wrap{ width:308px;float:left}
.video_wrap{ width:222px;}
.select_video,.select_voice,.select_image{  height: 240px;line-height: 240px; cursor:pointer}
</style>
<input type="hidden" value="{$default_value}" name="{$name}" id="material_res_{$name}" data-type='{$default_type}' data-id='{$default_id}' />
<div class="form-item cf">
  <div class="controls">
    <div class="check-item">
      <input type="radio" name="material_{$name}_type" id="material_{$name}_text" value="text" class="regular-radio" onClick="changeOption()">
      <label for="material_{$name}_text"></label>文本
      </div>
     <div class="check-item">
      <input type="radio" name="material_{$name}_type" id="material_{$name}_img" value="img" class="regular-radio" onClick="changeOption()">
       <label for="material_{$name}_img"></label> 图片
      </div>
    <div class="check-item">
      <input type="radio" name="material_{$name}_type" id="material_{$name}_news" value="news" class="regular-radio" onClick="changeOption()">
      <label for="material_{$name}_news"></label>图文
    </div>
    <div class="check-item">
      <input type="radio" name="material_{$name}_type" id="material_{$name}_voice" value="voice" class="regular-radio" onClick="changeOption()">
      <label for="material_{$name}_voice"></label>语音
    </div>
    <div class="check-item">
      <input type="radio" name="material_{$name}_type" id="material_{$name}_video" value="video" class="regular-radio" onClick="changeOption()">
      <label for="material_{$name}_video"></label>视频
    </div>
  </div>
</div>
<div class="form-item cf show showtext text_area" id="text_area" style="margin:20px 0; display:none">
<input type="hidden" name="material_{$name}_text_id" value="{$text_id}"/>
	<div class='text_material' id='text_material'>
      <a class="select_text" href="javascript:;" onClick="$.WeiPHP.openSelectAppText('{:U('Home/Material/text_lists')}',selectTextCallback)">选择文本</a>
      <div class="text_wrap" style="height:auto;padding:15px 0;"></div>
      <a class="delete" href="javascript:;" style="left: 310px;">删除</a>
	</div>
</div>
<div  class="form-item cf show shownews appmsg_area" id="appmsg_area" style="margin:20px 0; display:none">
<input type="hidden" name="material_{$name}_news_id" value="{$news_id}"/>
      <a class="select_appmsg" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('Home/Material/material_data')}',selectAppMsgCallback)">选择图文</a>
      <div class="appmsg_wrap" style="height:auto;"></div>
      <a class="delete" href="javascript:;" style="left: 310px;">删除</a>
</div>

<div class="form-item cf show showimg image_area" id="image_area" style="margin:20px 0; display:none">
<input type="hidden" name="material_{$name}_img_id" value="{$img_id}"/>
 
        <a class="select_image image_material" href="javascript:;"  onClick="$.WeiPHP.openSelectAppMsg('{:U('Home/Material/picture_data')}',selectImageCallback)">从素材库选择图片</a>
        <div class="image_wrap"></div>
        <a class="delete" href="javascript:;" style="left: 310px; ">删除</a>

</div>
<div class="form-item cf show showvoice voice_area" id="voice_area" style="margin:20px 0; display:none">
<input type="hidden" name="material_{$name}_voice_id" value="{$voice_id}"/>
     <a class="voice_material select_voice" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('Home/Material/voice_data')}',selectVoiceCallback,'选择语音素材')">选择语音素材</a>
     <div class="voice_wrap"></div>
     <a class="delete" href="javascript:;" >删除</a>
</div>
<div class="form-item cf show showvideo video_area" id="video_area" style="margin:20px 0; display:none">
<input type="hidden" name="material_{$name}_video_id" value="{$video_id}"/>

     <a class="voice_material select_video" href="javascript:;" onClick="$.WeiPHP.openSelectAppMsg('{:U('Home/Material/video_data')}',selectVideoCallback,'选择视频素材')">选择视频素材</a>

     <div class="video_wrap" style="float: left;"></div>
     <a class="delete" href="javascript:;" style="left: 230px;">删除</a>
</div>

<script type="text/javascript">
function changeOption(){
	$(".show").each(function(){
		$(this).hide();

	});
	var val = $("input[name='material_{$name}_type']:checked").val();
	$("#material_{$name}").attr('data-type', val);
	
	if(val == 'news'){
		var group_id=$("input[name='material_{$name}_news_id']").val();
		if(group_id){
			$.post("{:U('Home/Material/get_news_by_group_id')}",{'group_id':group_id},function(vo){
				var html_str='';
				if(vo.length==1){
					html_str='<div class="appmsg_item"><h6>'+vo[0]['title']+'</h6><div class="main_img"><img src="'+vo[0]['img_url']+'"/></div><p class="desc">'+vo[0]['intro']+'</p></div><div class="hover_area"></div>';
				}else{
					for(var i=0;i<vo.length;i++){
						if(vo[i]['id']==group_id){
							html_str='<div class="appmsg_item"><div class="main_img"><img src="'+vo[i]['img_url']+'"/><h6 class="ellipsis"">'+vo[i]['title']+'</h6></div><p class="desc">'+vo[i]['intro']+'</p></div>';
						}else{
							html_str+=' <div class="appmsg_sub_item"><p class="title">'+vo[i]['title']+'</p><div class="main_img"><img src="'+vo[i]['img_url']+'"/></div></div>';
						}
					}
					html_str+='<div class="hover_area"></div>';
				}
				$('.appmsg_wrap').html(html_str).show();
				$('.select_appmsg').hide();
				$('.appmsg_area .delete').show();

			})
		}
	}else if(val == 'img'){
		var image_id=$("input[name='material_{$name}_img_id']").val();
		var img_html='';
		if(image_id){
			$.post("{:U('Home/Material/ajax_picture_by_id')}",{'image_id':image_id},function(imgpath){
				if(imgpath){
					img_html='<div class="appmsg_item"><div class="main_img"><img src="'+imgpath+'"/></div><div class="hover_area"></div></div>';
					$('.image_wrap').html(img_html).show();
					$('.select_image').hide();
	 				$('#image_area .delete').show();
				}
			});
		}
	}else if(val == 'text'){
			var text_id=$("input[name='material_{$name}_text_id']").val();
			var text_html='';
			$.post("{:U('Home/Material/ajax_text_by_id')}",{'text_id':text_id},function(content){
				if(content){
					text_html=content;
					$('.text_wrap').html(text_html).show();
					$('.select_text').hide();
					$('.showtext .delete').show();
	
				}
			});	
	}else if(val == 'voice'){
		var voice_id=$("input[name='material_{$name}_voice_id']").val();
		var voice_html='';
		if(voice_id){
			$.post("{:U('Home/Material/ajax_voice_by_id')}",{'voice_id':voice_id},function(vo){
				if(vo){
					voice_html+='<div class="picture_item"><div class="sound_item" onclick="playSound(\'sound_'+voice_id+'\',this);"><img class="icon_sound" src="__IMG__/icon_sound.png"><p class="audio_name ellipsis"">'+vo['title']+'<span class="fr colorless">'+vo['playtime']+'</span></p><audio id="sound_'+voice_id+'" src="'+vo['file_path']+'"></audio></div><div class="hover_area"></div></div>';
					$('.voice_wrap').html(voice_html).show();
					$('.select_voice').hide();
					$('#voice_area .delete').show();
				}
			});
		}
	}else if(val == 'video'){
		var video_id=$("input[name='material_{$name}_video_id']").val();
		var video_html='';
		if(video_id){
			$.post("{:U('Home/Material/ajax_video_by_id')}",{'video_id':video_id},function(vo){
				if(vo){
					video_html+='<div class="picture_item"><div class="video_item"><p class="title ellipsis"">'+vo['title']+'</p> <p class="ctime colorless">'+vo['cTime']+'</p><div class="video_area"><video src="'+vo['file_url']+'" controls="controls">您的浏览器不支持 video 标签。</video></div><p></p></div></div>';
					$('.video_wrap').html(video_html).show();
					$('.select_video').hide();
					$('#video_area .delete').show();
				}
			});
		}
	}

	$('.show'+val).each(function(){
		$(this).show();
	});
	setRes();
}
$(function(){
	var type = '{$default_value}';
	var arrType= type.split(":");
	if(arrType[0]=="")
	    arrType[0] = 'text';
	$("input[name='material_{$name}_type'][value="+arrType[0]+"]").attr("checked",true);
	changeOption();
	$('.appmsg_area .delete').click(function(){
		var tt = $("input[name='material_{$name}_type'][value="+arrType[0]+"]:checked").val();
		$("input[name='{$name}']").val(tt+':');
		$('.appmsg_wrap').html('').hide();
		$('.select_appmsg').show();
		$('.appmsg_area .delete').hide();
		$('input[name="material_{$name}_news_id"]').val(0);
	})
	$('#image_area .delete').click(function(){
		var tt = $("input[name='material_{$name}_type'][value="+arrType[0]+"]:checked").val();
		$("input[name='{$name}']").val(tt+':');
		$('.image_wrap').html('').hide();
		$('.select_image').show();
		$('#image_area .delete').hide();
		$('input[name="material_{$name}_img_id"]').val(0);
	})
	$('.showtext .delete').click(function(){
		var tt = $("input[name='material_{$name}_type'][value="+arrType[0]+"]:checked").val();
		$("input[name='{$name}']").val(tt+':');
		$('.text_wrap').html('').hide();
		$('.select_text').show();
		$('.showtext .delete').hide();
		$('input[name="material_{$name}_text_id"]').val(0);
	})
	$('#voice_area .delete').click(function(){
		var tt = $("input[name='material_{$name}_type'][value="+arrType[0]+"]:checked").val();
		$("input[name='{$name}']").val(tt+':');
		$('.voice_wrap').html('').hide();
		$('.select_voice').show();
		$('#voice_area .delete').hide();
		$('input[name="material_{$name}_voice_id"]').val(0);
	})
	$('#video_area .delete').click(function(){
		var tt = $("input[name='material_{$name}_type'][value="+arrType[0]+"]:checked").val();
		$("input[name='{$name}']").val(tt+':');
		$('.video_wrap').html('').hide();
		$('.select_video').show();
		$('#video_area .delete').hide();
		$('input[name="material_{$name}_video_id"]').val(0);
	})	
})
function selectAppMsgCallback(_this){
	$('.appmsg_wrap').html($(_this).html()).show();
	$('.select_appmsg').hide();
	$('.appmsg_area .delete').show();
	$('input[name="material_{$name}_news_id"]').val($(_this).data('group_id'));
	$.Dialog.close();
	setRes();
}
function selectImageCallback(_this){
	$('.image_wrap').html($(_this).html()).show();
	$('.select_image').hide();
 	$('#image_area .delete').show();
	$('input[name="material_{$name}_img_id"]').val($(_this).data('id'));
	$.Dialog.close();
	setRes();
}
function selectTextCallback(_this){
	$('.text_wrap').html(_this['content']).show();
	$('.select_text').hide();
 	$('.showtext .delete').show();
	$('input[name="material_{$name}_text_id"]').val(_this['id']);
	$.Dialog.close();
	setRes();
}
function selectVoiceCallback(_this){
	$(_this).find('.icon_sound').attr('src',IMG_PATH+'/icon_sound.png');
	$('.voice_wrap').html($(_this).html()).show();
	$('.select_voice').hide();
	$('#voice_area .delete').show();
	$('input[name="material_{$name}_voice_id"]').val($(_this).data('id'));
	$.Dialog.close();
	setRes();
	
}
function selectVideoCallback(_this){
	$('.video_wrap').html($(_this).html()).show();
	$('.select_video').hide();
	$('#video_area .delete').show();
	$('input[name="material_{$name}_video_id"]').val($(_this).data('id'));
	$.Dialog.close();
	setRes();
}
function setRes(){
	var type = $("input[name='material_{$name}_type']:checked").val();
	if(type=='text'){
		var id = $('input[name="material_{$name}_text_id"]').val();
	}else if(type=='img'){
		var id = $('input[name="material_{$name}_img_id"]').val();
	}else if(type=='news'){
		var id = $('input[name="material_{$name}_news_id"]').val();
	}else if(type=='voice'){
		var id = $('input[name="material_{$name}_voice_id"]').val();
	}else if(type=='video'){
		var id = $('input[name="material_{$name}_video_id"]').val();
	}
	/*console.log(type);
	console.log(id);*/
	var res = type + ':' +id;
	/*console.log(res);*/
	$('#material_res_{$name}').val(res);
}
</script>